<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <a-form-model layout="inline" style="margin-bottom: 20px" :form="form">
        <a-form-model-item label="金蝶编码">
          <a-input v-model="form.kdCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="京东编码">
          <a-input v-model="form.jdCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="商品编码">
          <a-input v-model="form.goodCode"></a-input>
        </a-form-model-item>
        <a-form-model-item label="商品名称">
          <a-input v-model="form.goodName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="是否有效">
          <a-select default-value="全部" style="width: 100px" v-model="form.useFlag">
            <a-select-option value="1">有效</a-select-option>
            <a-select-option value="0">无效</a-select-option>
            <a-select-option value="-1">全部</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="数据中心">
          <a-select default-value="全部" style="width: 200px" v-model="form.dataCenterId">
            <a-select-option value="999">999对接测试</a-select-option>
            <a-select-option value="998">998测试中心</a-select-option>
            <a-select-option value="100">100思诺多</a-select-option>
            <a-select-option value="101">101CLUB</a-select-option>
            <a-select-option value="102">102综合数据中心</a-select-option>
            <a-select-option value="103">103KA数据中心</a-select-option>
            <a-select-option value="104">104品牌数据中心</a-select-option>
            <a-select-option value="105">105单桶数据中心</a-select-option>
            <a-select-option value="106">106小酒吧数据中心</a-select-option>
            <a-select-option value="107">107集采数据中心</a-select-option>
            <a-select-option value="">全部</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 15px" @click="bindReset">
            重置
          </a-button>
          <a-button @click="openModal" style="margin-left: 15px">
            新增
          </a-button>
          <a-button @click="delmultiple" style="margin-left: 15px">
            置为无效
          </a-button>
          <a-button @click="usefulmultiple" style="margin-left: 15px">
            置为有效
          </a-button>
          <a-button @click="exportKD" style="margin-left: 15px">
            导出
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }" :columns="columns" :data-source="data" :loading="loading" :pagination="pagination"
        @change="handleTableChange">
        <span slot="options" slot-scope="text, record">
          <a-button type="primary" @click="del(record)" v-if="record.useFlag == 1">置为无效</a-button>
          <a-button type="primary" @click="useful(record)" v-else>置为有效</a-button>
          <a-button type="primary" @click="edit(record)" style="margin-left: 15px">编辑</a-button>
        </span>
      </a-table>
      <a-modal v-model="visible" :title="tit" @ok="handleOk" @cancel="closeModal">
        <a-form-model layout="inline" :form="detail">
          <a-form-model-item label="金蝶编码">
            <a-input style="width: 300px" v-model="detail.kdCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="京东编码">
            <a-input style="width: 300px" v-model="detail.jdCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="商品编码">
            <a-input style="width: 300px" v-model="detail.goodCode"></a-input>
          </a-form-model-item>
          <a-form-model-item label="商品名称" in>
            <a-input style="width: 300px" v-model="detail.goodName"></a-input>
          </a-form-model-item>
          <a-form-model-item label="京东事业部" in>
            <!-- <a-input style="width:300px" v-model="detail.jdDept"></a-input> -->
            <a-select style="width: 200px" v-model="detail.jdDept" @change="handleJdDept">
              <a-select-option value="yizhuo">一酌事业部</a-select-option>
              <a-select-option value="juhuitongNew">新聚汇通事业部</a-select-option>
              <a-select-option value="yuechang">越常</a-select-option>
              <!-- <a-select-option value="guanyi">管易</a-select-option> -->
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="数据中心" in>
            <!-- <a-input style="width:300px" v-model="detail.jdDept"></a-input> -->
            <a-select style="width: 200px" v-model="detail.dataCenterId" @change="handleCenterId">
              <a-select-option value="999">999对接测试</a-select-option>
            <a-select-option value="998">998测试中心</a-select-option>
            <a-select-option value="100">100思诺多</a-select-option>
            <a-select-option value="101">101CLUB</a-select-option>
            <a-select-option value="102">102综合数据中心</a-select-option>
            <a-select-option value="103">103KA数据中心</a-select-option>
            <a-select-option value="104">104品牌数据中心</a-select-option>
            <a-select-option value="105">105单桶数据中心</a-select-option>
            <a-select-option value="106">106小酒吧数据中心</a-select-option>
            <a-select-option value="107">107集采数据中心</a-select-option>
            <!-- <a-select-option value="">全部</a-select-option> -->
              <!-- <a-select-option value="guanyi">管易</a-select-option> -->
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import {
  getKdGoodsCodeList,
  addOrUpdateKdGoodsCode,
  deleteKdGoodsCode,
  usefulKdGoodsCode,
  baseUrl,
} from "@/request/api";
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "金蝶对照表", path: "/KDcompare", query: {} },
      ],
      form: {
        goodCode: "",
        goodName: "",
        jdCode: "",
        kdCode: "",
        useFlag: "1",
        dataCenterId: ""
      },
      detail: {
        goodCode: "",
        goodName: "",
        jdCode: "",
        kdCode: "",
        id: "",
        operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
        jdDept: "",
        dataCenterId: ''
      },
      pagination: { current: 1, size: 10 },
      data: [],
      selectedRowKeys: [],
      columns: [
        {
          title: "金蝶编码",
          dataIndex: "kdCode",
          key: "kdCode",
          width: "",
        },
        {
          title: "京东编码",
          dataIndex: "jdCode",
          key: "jdCode",
          width: 100,
        },
        {
          title: "商品编码",
          dataIndex: "goodCode",
          key: "goodCode",
          width: "",
        },
        {
          title: "商品名称",
          dataIndex: "goodName",
          key: "goodName",
          width: 160,
        },
        {
          title: "京东事业部",
          dataIndex: "jdDeptDesc",
          key: "jdDeptDesc",
          width: 120,
        },
        {
          title: "数据中心",
          dataIndex: "dataCenterIdDesc",
          key: "dataCenterIdDesc",
          width: 120,
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 110,
        },
        {
          title: "创建人",
          dataIndex: "createBy",
          key: "createBy",
          width: 80,
        },
        {
          title: "运行时间",
          dataIndex: "updateTime",
          key: "updateTime",
          width: 110,
        },
        {
          title: "更新人",
          dataIndex: "updateBy",
          key: "updateBy",
          width: 80,
        },
        {
          title: "编辑",
          dataIndex: "options",
          key: "options",
          slots: { title: "操作" },
          scopedSlots: { customRender: "options" },
          width: "220px",
        },
      ],
      visible: false,
      tit: "编辑",
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.getKdGoodsCodeList(1, 10);

  },
  methods: {
    async getKdGoodsCodeList(p, ps) {
      this.loading = true;
      let { goodCode, goodName, jdCode, kdCode, useFlag, dataCenterId } = this.form;
      let params =
        "p=" +
        (p - 1) +
        "&ps=" +
        ps +
        "&goodCode=" +
        goodCode +
        "&goodName=" +
        goodName +
        "&jdCode=" +
        jdCode +
        "&kdCode=" +
        kdCode +
        "&useFlag=" +
        useFlag +
        "&dataCenterId=" +
        dataCenterId;
      let { data } = await getKdGoodsCodeList(params);
      console.log(data);
      if (data.success) {
        this.loading = false;
        let pagination = { ...this.pagination };
        pagination.total = data.content.total;
        this.pagination = pagination;
        this.data = data.content.records;
        this.selectedRowKeys = [];
      } else {
        this.loading = false;
      }
    },

    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getKdGoodsCodeList(pager.current, pager.size);
    },
    onSubmit(e) {
      e.preventDefault();
      console.log(this.form);
      this.getKdGoodsCodeList(1, 10);
    },
    bindReset() {
      this.form = {
        goodCode: "",
        goodName: "",
        jdCode: "",
        kdCode: "",
        useFlag: "1",
      };
      this.getKdGoodsCodeList(1, 10);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleJdDept(e) {
      console.log(e)
      this.detail.jdDept = e
    },
    handleCenterId(e) {
      console.log(e)
      this.detail.dataCenterId = e
    },
    openModal() {
      this.visible = true;
    },
    handleOk() {
      this.addOrUpdateKdGoodsCode();
      this.closeModal();
    },
    edit(record) {
      this.detail = {
        id: record.id,
        goodCode: record.goodCode,
        goodName: record.goodName,
        jdCode: record.jdCode,
        kdCode: record.kdCode,
        operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
        jdDept: record.jdDept,
        dataCenterId: record.dataCenterId
      };
      this.openModal();
    },
    closeModal() {
      this.detail = {
        goodCode: "",
        goodName: "",
        jdCode: "",
        kdCode: "",
        id: "",
        jdDept: "",
        dataCenterId: '',
        operateBy: JSON.parse(localStorage.getItem("userInfo")).userName,
      };
      this.visible = false;
    },
    async addOrUpdateKdGoodsCode() {
      console.log(this.detail);
      let { data } = await addOrUpdateKdGoodsCode(this.detail);
      console.log(data);
      if (data.success) {
        this.getKdGoodsCodeList(this.pagination.current, 10);
      } else {
        this.$message.error(data.content);
      }
    },
    del(record) {
      let ids = [];
      ids.push(record.id);
      this.confirmDel(ids);
    },
    useful(record) {
      let ids = [];
      ids.push(record.id);
      this.confirmUseful(ids);
    },
    delmultiple() {
      let ids = [];
      this.data &&
        this.data.map((item, i) => {
          this.selectedRowKeys &&
            this.selectedRowKeys.map((items) => {
              if (i == items) {
                ids.push(item.id);
              }
            });
        });
      this.confirmDel(ids);
    },
    usefulmultiple() {
      let ids = [];
      this.data &&
        this.data.map((item, i) => {
          this.selectedRowKeys &&
            this.selectedRowKeys.map((items) => {
              if (i == items) {
                ids.push(item.id);
              }
            });
        });
      this.confirmUseful(ids);
    },
    confirmDel(ids) {
      let _this = this;
      this.$confirm({
        title: "确定置为无效",
        content: "",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          _this.deleteKdGoodsCode(ids);
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    confirmUseful(ids) {
      let _this = this;
      this.$confirm({
        title: "确定置为有效",
        content: "",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          _this.usefulKdGoodsCode(ids);
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    },
    async deleteKdGoodsCode(arr) {
      let ids = "";
      arr &&
        arr.map((item) => {
          ids += item + ",";
        });
      let params =
        "ids=" +
        ids +
        "&operateBy=" +
        JSON.parse(localStorage.getItem("userInfo")).userName;
      console.log(params);
      let { data } = await deleteKdGoodsCode(params);
      console.log(data);
      if (data.success) {
        this.getKdGoodsCodeList(this.pagination.current, 10);
      }
    },
    async usefulKdGoodsCode(arr) {
      let _this = this;
      let ids = "";
      arr &&
        arr.map((item) => {
          ids += item + ",";
        });
      let params =
        "ids=" +
        ids +
        "&operateBy=" +
        JSON.parse(localStorage.getItem("userInfo")).userName;
      console.log(params);
      let { data } = await usefulKdGoodsCode(params);
      console.log(data);
      if (data.success) {
        _this.getKdGoodsCodeList(_this.pagination.current, 10);
      } else {
        _this.$message.error(data.content);
      }
    },
    exportKD() {
      axios({
        method: "get",
        url: `/erp/exportKdGoodsCodeExcel`,
        data: "",
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        let blob = new Blob([res.data]);
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", "金蝶商品对照表.xls");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>